<template>
  <div id="app">
    <h2>{{ message }}</h2>
    <h2>{{ $store.state.counter }}</h2>
     <button @click="btnup">+</button>
     <button @click="btndown">-</button>
     <button @click="addCount(5)">+5</button>
     <button @click="addTen(10)">+10</button>
     <button @click="addStu">添加学生</button>
     <h5>{{ $store.state.info }}</h5>
     <button @click="updateInfo">修改信息</button>
     <h5>{{ $store.state.a.name }}</h5>
    <button @click="updateName">修改名字</button>
    <h5>{{ $store.getters.fullname }}</h5>
    <h5>{{ $store.getters.fullname2 }}</h5>
    <h5>{{ $store.getters.fullname3 }}</h5>
    <button @click="asycnupdateName">异步修改名字</button>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'
import {INCREMENT} from './store/mutations-type'
export default {
  name: 'App',
  components:{
    HelloVuex
  },
  data(){
    return {
      message:'我是App组件',
      counter:0
    }
  },methods:{
    btnup(){
      this.$store.commit(INCREMENT);
    },
    btndown(){
      // this.counter--;
      this.$store.commit('decrement')
    },

    addCount(count){
       //普通提交风格
      // this.$store.commit('incrementCount',count)
      //特殊提交风格
      this.$store.commit({
        type:'incrementCount',
        count:count
      })

    },
    addTen(count){
      this.$store.commit('decrementCount',count)
    },
    addStu(){
      const stu={id:440,name:'wje',age:30}
      this.$store.commit('addStudent',stu)
    },
    updateInfo(){
      // this.$store.commit('updateInfo')
      // commit是提交到mutations，现在是去actions，要用dispatch
      // this.$store.dispatch('aUpdateInfo',{
      //   message:'我是携带的信息',
      //   success:()=>{
      //     console.log('里面完成了');
      //   }
      // })
      this.$store.dispatch('aUpdateInfo','我是携带的信息')
      .then(res=>{
        console.log('里面完成了提交');
        console.log(res);
      })
    },
    updateName(){
      this.$store.commit('updateName','luuuuu')
    },
    asycnupdateName(){
      this.$store.dispatch('aUpdateName')
    }

  }
}
</script>

<style>
</style>
